<script setup lang="ts">
defineOptions({
  name: "Setting"
});
import { getSetting, updateSetting, addSetting, deleteSetting } from "@/api/setting";
import { message } from "@/utils/message";
import { onMounted, ref, reactive } from "vue";
onMounted(async () => {
  getSettingList();
});
//获取全局配置
const getSettingList = async () => {
  let res = await getSetting();
  let data = res.data.data;
  console.log("全局配置", data);
  tableData.value = data;
};
const tableData = ref([]);
const form = reactive({
  name: "",
  value: "",
  authority: '',
  notes: '',
  setting_id: ''
});
const dialogOverflowVisible = ref(false);
const editOrAdd = ref(false);
const onSubmit = async () => {
  if (editOrAdd.value) {
    let res = await updateSetting(form);
    if (res.data.code == 200) {
      message("更新成功", { type: "success" });
      dialogOverflowVisible.value = false;
      getSettingList();
    }
  } else {
    let res = await addSetting(form);
    if (res.data.code == 200) {
      message("新增成功", { type: "success" });
      dialogOverflowVisible.value = false;
      getSettingList();
    }
  }
};
//删除配置
const deleteS = async (data) => {
  let res = await deleteSetting({ setting_id: data });
  if (res.data.code == 200) {
    message("删除成功", { type: "success" });
    getSettingList();
  }
}

function show_table(data = null) {
  if (data == null) {
    Object.keys(form).forEach(key => {
      form[key] = null;
      editOrAdd.value = false;
    });
  } else {
    Object.keys(data.row).forEach(key => {
      form[key] = data.row[key];
      editOrAdd.value = true;
    });
  }
}
const toPresent = (data) => {
  data.value = data.default_value

}
</script>

<template>
  <div>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column prop="setting_id" label="ID" />
      <el-table-column prop="name" label="Name值" />
      <el-table-column prop="value" label="Value值" show-overflow-tooltip />
      <el-table-column>
        <template #header> 权限 </template>
        <template #default="scope">
          <el-tag :type="scope.row.authority
            == 0 ? 'primary' : 'success'">{{
            scope.row.authority == 0 ? '公有' : '私有'

            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="notes" label="备注" />
      <el-table-column width="200">
        <template #header> 操作 </template>
        <template #default="scope">
          <el-button size="small" @click="
            dialogOverflowVisible = true;
          show_table(scope);
          ">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteS(scope.row.setting_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="
      dialogOverflowVisible = true;
    show_table();
    " style="margin-top:15px">添加</el-button>

    <el-dialog v-model="dialogOverflowVisible" title="配置信息" width="500" draggable overflow>
      <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="name值" required>
            <el-input v-model="form.name" required />
          </el-form-item>
          <el-form-item label="value值" required>
            <textarea style="width: 100%;height: 200px;border: 1px solid #dcdfe6; border-radius: 3px"
              v-model="form.value" required></textarea>
          </el-form-item>

          <el-form-item label="权限" required>
            <el-radio-group v-model="form.authority" class="ml-4">
              <el-radio :value=0 size="large">公有</el-radio>
              <el-radio :value=1 size="large">私有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.notes" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogOverflowVisible = false">关闭</el-button>
          <el-button v-if="editOrAdd" @click="toPresent(form)" plain>还原默认值</el-button>
          <el-button type="primary" @click="onSubmit"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" >
.el-popper {
  max-width: 300px !important;
}
</style>
